<template>
  <div class="personal_center">
    <!--    顶部返回按钮-->
    <div class="head_return" @click="headReturn"></div>
    <!-- 个人中心顶部标题 -->
    <div class="personal_tit">
      <img src="../../assets/image/personal/personalTop.png" alt="" />
    </div>
    <!-- 内容区 -->
    <div class="personal_con">
      <div class="per_con_fl">
        <div class="fl_user">
          <img src="../../assets/image/personal/xz.png" alt="" />
          <div class="name">小雨同学</div>
          <div class="tag">
            <div class="tag_fl"></div>
            <div class="tag_fr"></div>
          </div>
          <img class="setup" @click="goSetPage" src="../../assets/image/personal/setup.png" alt="">
        </div>
        <div class="fl_data">
          <div class="data_top">
            <img src="../../assets/image/personal/xz.png" alt="" />
            <div class="data_list">
              <div class="data_items">
                <span>90</span>
                <span>综合评分</span>
              </div>
              <div class="data_items">
                <span>123</span>
                <span>累计测评</span>
              </div>
              <div class="data_items">
                <span>A</span>
                <span>老师评价</span>
              </div>
            </div>
          </div>
          <div class="data_con">
            <div class="data_con_tit">
              <img src="../../assets/image/personal/zu.png" alt="" />
              er能力值
            </div>
            <div class="data_con_tb"></div>
          </div>
          <div class="record_text">
              综合评定
          </div>
        </div>
      </div>
      <div class="per_con_fr">
        <!-- 题目列表 -->
        <div class="topics_list">
          <div
            :class="['topics_item', i == 1 ? 'curr_topics_item' : '']"
            v-for="(item, i) in 7"
          >
            阅读广度
          </div>
          <div class="opics_more">
              <span></span>
              <span></span>
              <span></span>
          </div>
        </div>
        <!-- 历史数据 -->
        <div class="historical_data">
          <div class="data_tit">历史数据</div>
          <div class="is_data_con">
            <div class="data_con_item">
              <div class="item_lj">
                <span>长句理解</span>
                <div class="item_lj_time">2021</div>
              </div>
              <div class="item_li">
                <div class="item_info_li">
                  <img src="../../assets/image/personal/mx.png" alt="" />
                  <div>本月测评题量20道</div>
                </div>
                <div class="item_info_li">
                  <img src="../../assets/image/personal/sjts.png" alt="" />
                  <div>比上月增长了5%</div>
                </div>
                <div class="item_info_li">
                  <img src="../../assets/image/personal/mx.png" alt="" />
                  <div>测评平均分89分</div>
                </div>
              </div>

              <img class="cjlj_img" src="../../assets/image/personal/cjlj.png" alt="">
            </div>
            
            <div class="data_con_item">
              <div class="item_lj">
                <span>词语逻辑</span>
                <div class="item_lj_time">2021</div>
              </div>
              <div class="item_li">
                <div class="item_info_li">
                  <img src="../../assets/image/personal/mx.png" alt="" />
                  <div>本月测评题量20道</div>
                </div>
                <div class="item_info_li">
                  <img src="../../assets/image/personal/mx.png" alt="" />
                  <div>比上月增长了5%</div>
                </div>
                <div class="item_info_li">
                  <img src="../../assets/image/personal/mx.png" alt="" />
                  <div>测评平均分89分</div>
                </div>
              </div>

              <img class="cjlj_img" src="../../assets/image/personal/cjlj.png" alt="">
            </div>
          </div>
        </div>
        <!-- 数据对比 -->
        <div class="data_comparison">
            <div class="data_comparison_tit">
                <div class="tit_fl">数据对比</div>
                <div class="tit_type">
                    <div> <span style="background: #FFA642"></span> 词语逻辑</div>
                    <div > <span style="background: #7842FF"></span> 长句理解</div>
                </div>
            </div>
            <div class="data_comparison_con">

            </div>
        </div>
        <!-- 训练记录 -->
        <div class="personal_record" @click="goRecord">
            <img src="../../assets/image/personal/record.png" alt="">
        </div>
        <!-- 测试历史数据 -->
        <div class="record_text">
            测试历史数据
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 返回上一页
    headReturn() {
      this.$router.go(-1);
    },
    // 前往训练记录页面
    goRecord(){
        this.$router.push({path:'/personal/record'})
    },
    // 前往设置页面
    goSetPage(){
        this.$router.push({path: '/personal/setpage'})
    }
  },
};
</script>

<style lang="less" scoped>
.personal_center {
  width: 100vw;
  height: 100vh; 
  background: url("../../assets/image/personal/proback.png") no-repeat;
  background-size: 100% 100%;

  .head_return {
    position: absolute;
    z-index: 10;
    top: 0.3rem;
    left: 0.4rem;
    width: 0.7rem;
    height: 0.7rem;
    background: url("../../assets/image/lesson/return.png") no-repeat;
    background-size: 100% 100%;
    cursor: pointer;

    & > img {
      width: 100%;
      height: 100%;
    }
  }

  .personal_tit {
    margin: 0 auto;
    width: 2.65rem;
    height: 1.01rem;
    & > img {
      width: 100%;
    }
  }

  .personal_con {
    display: flex;
    margin: 0.39rem auto 0 auto;
    width: 16.72rem;
    height: 8.49rem;
    .per_con_fl {
      width: 5.54rem;
      .fl_user {
        position: relative;
        padding: 0 0 0.51rem 0;
        height: 2.89rem;
        text-align: center;
        background: url("../../assets/image/personal/user.png") no-repeat;
        background-size: 100% 100%;
        box-sizing: border-box;
        .setup{
            position: absolute;
            right: 0.28rem;
            top: 0.23rem;
            width: 0.92rem;
            height: 0.41rem;
            cursor: pointer;
        }
        & > img {
          width: 0.76rem;
          border-radius: 50%;
        }
        .name {
          font-size: 0.18rem;
          color: #313131;
        }
        .tag {
          margin: 0.2rem auto 0 auto;
          display: flex;
          justify-content: space-between;
          width: 1.92rem;
          height: 0.44rem;
          .tag_fl {
            width: 0.81rem;
            height: 100%;
            background: url("../../assets/image/personal/grade.png") no-repeat;
            background-size: 100% 100%;
          }
          .tag_fr {
            width: 0.81rem;
            height: 100%;
            background: url("../../assets/image/personal/gradea.png") no-repeat;
            background-size: 100% 100%;
          }
        }
      }
      .fl_data {
          position: relative;
        padding: 0.6rem;
        height: 5.5rem;
        background: url("../../assets/image/personal/data.png") no-repeat;
        background-size: 100% 100%;
        box-sizing: border-box;
        .data_top {
          display: flex;
          height: 1.18rem;
          & > img {
            width: 1.18rem;
          }
          .data_list {
            margin-left: 0.47rem;
            display: flex;
            .data_items {
              display: flex;
              flex-direction: column;
              justify-content: center;
              text-align: center;
              font-size: 0.14rem;
              color: #6e6e6e;
              & span:nth-child(1) {
                color: #5443da;
                font-size: 0.26rem;
                font-weight: 700;
              }
            }
            .data_items:nth-child(2) {
              margin: 0 0.4rem;
            }
          }
        }
        .data_con {
          height: calc(100% - 1.18rem);
          .data_con_tit {
            padding-left: 0.23rem;
            height: 0.47rem;
            color: #3c3c3c;
            font-size: 0.18rem;
            line-height: 0.47rem;
            & > img {
              margin-right: 0.12rem;
              width: 0.17rem;
              vertical-align: middle;
            }
          }
          .data_con_tb {
            margin: 0.36rem auto 0 auto;
            width: 1.96rem;
            height: 1.96rem;
            background: pink;
          }
        }
        .record_text{
           position: absolute;
          left: 0.06rem;
          top: 0.11rem;
          width: 1.05rem;
          height: 0.17rem;
          text-align: center;
          color: #fff;
          font-weight: 700;
          font-size: 0.16rem;
          cursor: pointer;
        }
      }
    }
    .per_con_fr {
      position: relative;
      padding: 1.04rem 0.59rem 0.71rem 0.64rem;
      margin-left: 0.24rem;
      width: 10.94rem;
      height: 100%;
      background: url("../../assets/image/personal/perconfr.png") no-repeat;
      background-size: 100% 100%;
      box-sizing: border-box;
      .topics_list {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        height: 0.54rem;
        overflow: hidden;
        .topics_item {
          margin-right: 0.2rem;
          display: inline-block;
          padding: 0.15rem 0.22rem;
          background: #e9edf5;
          color: #9ca2ae;
          font-size: 0.16rem;
          border-radius: 0.24rem;
          cursor: pointer;
        }
        .opics_more{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            position: absolute;
            right: 0;
            width: 0.22rem;
            height: 0.48rem;
            border: 2px solid #E8ECF6;
            background: #E9EDF5;
            border-radius: 0.05rem;
            cursor: pointer;
            &>span{
                margin: 0 auto;
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background: #9CA2AE;
            }
        }
        .curr_topics_item {
          color: #fff;
          background: #3a58d9;
          box-shadow: 0px 5px 11px 0px rgba(88, 117, 237, 0.33);
        }
      }
      .historical_data {
        margin: 0.45rem 0 0.53rem 0; 
        .data_tit {
          height: 0.4rem;
          font-size: 0.18rem;
          color: #353535;
        }
        .is_data_con {
          display: flex;
          .data_con_item {
            position: relative;
            padding: 0.26rem 0.24rem 0.25rem 0.49rem;
            margin-right: 0.23rem;
            width: 4.12rem;
            height: 1.66rem;
            background: linear-gradient(-61deg, #b891fe 0%, #7842ff 100%);
            border-radius: 0.14rem;
            box-sizing: border-box;
            .item_lj {
              display: flex;
              justify-content: space-between;
              height: 0.42rem;
              font-size: 0.18rem;
              color: #fff;
              .item_lj_time {
                width: 0.88rem;
                height: 0.25rem;
                line-height: 0.25rem;
                font-size: 0.12rem;
                text-align: center;
                border-radius: 0.13rem;
                background: #8c5bfe;
              }
            }
            .item_li {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              margin-left: 1.38rem;
              width: 2rem;
              height: 0.73rem;
              font-size: 0.14rem;
              color: #fff;
              .item_info_li {
                display: flex;
                 
                & > img {
                  margin-right: 0.14rem;
                  width: 0.17rem;
                }
                & > div {
                    overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                }
              }
            }
            .cjlj_img{
                position: absolute;
                left: 0;
                bottom: 0;
                width: 0.84rem;
                height: 0.8rem;
            }
          }
          & .data_con_item:last-child {
            background: linear-gradient(-61deg, #fed28f 0%, #ffa642 100%);
          }
        }
      }
      .data_comparison{  
          .data_comparison_tit{
              display: flex;
              justify-content: space-between;
              height: 0.46rem;
              
              .tit_fl{
                  font-size: 0.18rem;
                  color: #353535;
              }
              .tit_type{
                  display: flex;
                  justify-content: space-between; 
                  font-size: 0.14rem;
                  color: #7B7B84;
                  &>div{
                      margin-right: 0.2rem;
                      &>span{
                          margin-right: 0.1rem;
                          display: inline-block;
                          width: 0.14rem;
                          height: 0.14rem;
                          border-radius: 50%; 
                      }
                  }
              }
          }
          .data_comparison_con{
              height: 2.6rem;
              background: pink;
          }
      }
      .personal_record{
          position: absolute;
          top: -0.32rem;
          right: -0.1rem;
          width: 1.1rem;
          height: 0.42rem;
          cursor: pointer;
          & > img {
              width: 100%;
          }
      }
      .record_text{
          position: absolute;
          left: 0.2rem;
          top: 0.12rem;
          width: 1.05rem;
          height: 0.17rem;
          color: #fff;
          font-weight: 700;
          font-size: 0.16rem;
          cursor: pointer;
      }
    }
  }
}
</style>  